<?php 
use yii\helpers\Url;
?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>聚合数据-注册</title>
    <link rel="stylesheet" type="text/css" href="/assets/css/reset.css" />
    <link rel="stylesheet" type="text/css" href="/assets/css/register.css" />
</head>
<body>
    <canvas id="regId"></canvas>
    <div id="regHeader">
        <a href="/"><div class="juhe_logo"></div></a>
        <div class="juhe_login">
            已有聚合帐号，<a href="<?= Url::toRoute('/index/login'); ?>">直接登录</a><img src="/assets/images/arrow.png">
        </div>
    </div>
    <div id="regContent">    
        <div class="reg_content">
            <form name="registerForm" id="mobileForm" action="/register/registProcess" method="post" class="regForm" autocomplete="off" onsubmit="return false;">
                <div class="reg_desc">
                    <div class="reg_desc_big mobile">手机注册</div>
                </div>
                <div class="reg_input">
                    <div class="reg_input_para">
                        <div class="reg_border"></div>
                        <input type="tel" class="regInput" name="mobilephone" value="" id="mobilephone" placeholder="手机号码" autocomplete="off" tabindex="2" />
                        <span class="errorTips"><i class="iconfont">&#xe610;</i><em>请输入正确的手机号</em></span>
                    </div>
                    <div class="reg_input_para code">
                        <div class="reg_border"></div>
                        <input type="text" class="regInput" name="codeNum" value="" id="codeNum" placeholder="手机验证码" autocomplete="off" tabindex="3" />
                        <input type="button" class="smsbtn" type="button" value="发送验证码" />
                        <span class="errorTips"><i class="iconfont">&#xe610;</i><em>验证码有误</em></span>
                        <input type="hidden" name="JUHE_TOKEN" value="143C7FDE5A8D0F63B361CCF56F893FE7CD8FABF1"> 
                    </div>
                    <div class="reg_input_para">
                        <div class="reg_border"></div>
                        <input type="text" class="regInput" name="username" value="" id="username" placeholder="QQ号" autocomplete="off" tabindex="1" />
                        <span class="errorTips"><i class="iconfont">&#xe610;</i><em>填写正确的QQ号</em></span>
                    </div>
                    <div class="reg_input_para">
                        <div class="reg_border"></div>
                        <input type="password" class="regInput" name="password" value="" id="password" placeholder="密码（不少于8位）" autocomplete="off" tabindex="4" />
                        <span class="errorTips"><i class="iconfont">&#xe610;</i><em>请输入大于8位的密码</em></span>
                    </div>
                    <div class="reg_input_para">
                        <p class="reg_ckeckbox">
                            <input type="checkbox" name="isRead" value="1" checked="checked" id="checked" class="checked"/>
                            <label for="checked" class="iconfont"></label>
                            &nbsp;我已阅读并接受<a href="/legal" target="_blank">《聚合用户服务协议》</a>
                            <span class="errorTips"><i class="iconfont">&#xe610;</i><em>请接受聚合用户服务协议</em></span>
                        </p>
                        <p>
                            <input type="hidden" name="type" value="1">
                            <input type="button" class="regBtn" id="mobileRegBtn" value="注册">
                            <span class="errorTips"><i class="iconfont">&#xe610;</i><em>系统异常</em></span>
                        </p>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div id="regCircle"></div>
</body>
<script src="/assets/js/jquery.min.js" type="text/javascript"></script>
<script src="/assets/js/layer/layer.js" type="text/javascript"></script>
<script src="/assets/js/json.parse.js" type="text/javascript"></script>
<script src="/assets/js/jquery.form.js" type="text/javascript"></script>
<script src="/assets/js/regPublic.js" type="text/javascript"></script>
<script src="/assets/js/regAnimation.js" type="text/javascript"></script>
    <script type="text/javascript">
    var window_width = $(window).width();
    var window_height = $(window).height();
    function regAnimation() {
        var $ele = $('#regId');
        if ($ele[0].getContext) {
            $('#regId').regAnimation({
                window_width: window_width,
                window_height: window_height,
                window_background: '#fff',
                star_count: '100',
                star_color: '#02c5ff',
                star_depth: '600'
            });
        }
    }
    $(function() {
        $('#regCircle').height(window_height - 330).fadeIn(function() {
            regAnimation();
        });
    });

    var typeArray = [true, true];
    var statusArray = [true, true, true, true, true, true, true];
    var checkArray = [true, true, true, true, true, true, true];
    var errorArray = [true, true];
    var token = getToken();

    function getToken() {
        return (generateMixed(6) + 'JhCN04');
    }

    function generateMixed(n) {
        var chars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
        var res = '';
        for (var i = 0; i < n; i++) {
            var id = Math.ceil(Math.random() * 35);
            res += chars[id];
        }
        return res;
    }

    function init() {
        initEvent();
    }

    function initData() {
        $('#username').val('');
        $('#mobilephone').val('');
        $('#codeNum').val('');
        $('#password').val('');
        $('#checked')[0].checked = true;
        $('.errorTips').hide();
    }

    function initDom() {
        var top = ($(window).height() - 340) / 2 - 120;
        var left = ($(window).width() - 900) / 2;
        $('.reg_content').css({
            'top': top,
            'left': left
        }).fadeIn(initDo);
    }

    function initEvent() {
        $('.reg_content').on('focus', '.regInput', function() {
            $('.reg_border').removeClass('hover');
            $(this).closest('.reg_input_para').find('.reg_border').addClass('hover');
        });
        $(window).on('resize', initDom);
        $(document).on('ready', initDom);
        $(document).on('keydown', function(e) {
            if (e.keyCode === 13) {
                type ? $('#mailRegBtn').click() : $('#mobileRegBtn').click();
            }
        });
        initMobileEvent();
    }

    function initMobileEvent() {
        $('#username').on('blur', function() {
            var ele = $(this);
            var errorDom = ele.siblings('.errorTips');
            var username = $.trim(ele.val());
            if (statusArray[0] === true) {
                statusArray[0] = false;
            }
            if (!isRegisterUserName(username)) {
                showError('昵称需在6-24位字母数字间', ele);
            } else {
                $.ajax({
                    url:'/common/checkUsed',
                    type:'post',
                    data:'token='+token+'&username='+username,
                    dataType:'json',
                    success:function(obj){
                        if(obj.code === '0'){
                            if (checkArray[0] === true) {
                                checkArray[0] = false;
                            }
                            errorDom.find('em').html('');
                            errorDom.hide();
                        }else if(obj.code === '-1'){
                            showError('该用户名已经存在', ele);
                        }
                    }
                });
            }
        });

            $('#mobilephone').on('blur', function() {
                var ele = $(this);
                var errorDom = ele.siblings('.errorTips');
                var mobilephone = $.trim(ele.val());
                if (statusArray[1] === true) {
                    statusArray[1] = false;
                }
                if (!isPhone(mobilephone)) {
                    showError('请输入正确的手机号', ele);
                } else {
                    if (checkArray[1] === true) {
                        checkArray[1] = false;
                    }
                    errorDom.find('em').html('');
                    errorDom.hide();
                }
            });
            $('#codeNum').on('blur', function() {
                var ele = $(this);
                var errorDom = ele.siblings('.errorTips');
                var codeNum = $.trim(ele.val());
                if (statusArray[0] === false && statusArray[1] === false && statusArray[2] === false && statusArray[3] === true) {
                    statusArray[3] = false;
                }
            });

            $('#password').on('blur', function() {
                var ele = $(this);
                var errorDom = ele.siblings('.errorTips');
                var userPass = $.trim(ele.val());
                if (statusArray[4] === true) {
                    statusArray[4] = false;
                }

                if (userPass.length < 8) {
                    showError('请输入大于8位的密码', ele);
                } else {
                    if (checkArray[4] === true) {
                        checkArray[4] = false;
                    }
                    errorDom.find('em').html('');
                    errorDom.hide();
                }

            });

            // 点击发送短信按钮时
            $('.smsbtn').click(function() {
                $('.errorTips').find('em').html('');
                $('.errorTips').hide();
                $('.smsbtn').prop("disabled", true);
                var mobilephone = $('#mobilephone').val().trim();
                var username = $('#username').val().trim();
                if (!isRegisterUserName(username)) {
                    showError('昵称需在6-24位字母数字间', $('#username'), true);
                    $('.smsbtn').prop('disabled', false);
                } else if (!isPhone(mobilephone)) {
                    showError('请输入正确的手机号', $('#mobilephone'), true)
                    $('.smsbtn').prop('disabled', false);
                } else {
                    if (statusArray[2] === true) {
                        statusArray[2] = false;
                    }
                    $('.smsbtn').val('验证码发送...').prop('disabled', true);
                    $.post('/register/sendsms', {
                        mobile: mobilephone,
                        username: username,
                        JUHE_TOKEN: $(':input[name="JUHE_TOKEN"]').val()
                    }, function(e) {
                        var o = json_parse(e);
                        if (o.code == '1') {
                            if (checkArray[2] === true) {
                                checkArray[2] = false;
                            }
                            resetSmsBtn(120);
                        } else {
                            if (errorArray[0] === true) {
                                errorArray[0] = false;
                            }
                            if (o.code == '-4') //用户名验证
                            {
                                showError(o.info, $('#username'), true);
                            } else if (o.code == '-1') //手机号错误或被用过
                            {
                                showError(o.info, $('#mobilephone'), true);
                            } else if (o.code == '-3') //手机号错误或被用过
                            {
                                showError(o.info, $('#codeNum'), true);
                            } else if (o.code == '-100' || o.code == '-2') { //出现系统级别错误单独显示
                                showError(o.info, $('#mobileRegBtn'), true);
                            }
                            $('.smsbtn').val('获取验证码').prop("disabled", false);
                        }
                    })
                }
            });

            // 点击注册按钮时
            $('#mobileRegBtn').click(function() {

                var userName = $('#username').val();
                var mobilephone = $('#mobilephone').val();
                var userPass = $('#password').val();
                var codeNum = $('#codeNum').val();

                userName = $.trim(userName);
                mobilephone = $.trim(mobilephone);
                userPass = $.trim(userPass);

                $(this).val('注册中...').prop('disabled', true);
                $('.errorTips').find('em').html('');
                $('.errorTips').hide();


                if (!isRegisterUserName(userName)) {
                    showError('昵称需在6-24位字母数字间', $('#username'), true);
                    $(this).val('注册').removeAttr('disabled');
                } else if (!isPhone(mobilephone)) {
                    showError('请输入正确的手机号', $('#mobilephone'), true);
                    $(this).val('注册').removeAttr('disabled');
                } else if (codeNum == '') {
                    showError('验证码有误', $('#codeNum'), true);
                    $(this).val('注册').removeAttr('disabled');
                } else if (userPass.length < 8) {
                    showError('请输入大于8位的密码', $('#password'), true);
                    $(this).val('注册').removeAttr('disabled');
                } else if (!$('#checked').is(":checked")) {
                    if (statusArray[6] === true) {
                        statusArray[6] = false;
                    }
                    showError('请接受聚合用户服务协议', $('#checked'), true);
                    $(this).val('注册').removeAttr('disabled');
                } else { //基础验证通过
                    if (statusArray[5] === true) {
                        statusArray[5] = false;
                    }
                    $('#mobileForm').ajaxSubmit(function(e) {
                        var obj = json_parse(e);
                        var code = obj.code;
                        var info = obj.info;

                        if (code == '1') {
                            if (checkArray[5] === true) {
                                checkArray[5] = false;
                            }
                            layer.msg(info, {
                                icon: 1,
                                time: 1500
                            }, function() {});
                            setTimeout(function() {
                                window.location.href = '/login/index/status/success'
                            }, '1500');
                        } else {
                            if (errorArray[1] === true) {
                                errorArray[1] = false;
                            }
                            if (code == '-1') {
                                showError(info, $('#username'), true);
                            } else if (code == '-2') {
                                showError(info, $('#mobilephone'), true);
                            } else if (code == '-3') {
                                showError(info, $('#codeNum'), true);
                            } else if (code == '-4') {
                                showError(info, $('#password'), true);
                            } else if (code == '-100') {
                                showError(info, $('#mobileRegBtn'), true);
                            }
                            $('#mobileRegBtn').val('注册').prop('disabled', false);
                        }

                    })
                }
            });
        }


        function showError(msg, selector, isFocus) {
            selector.parent().find('.errorTips').find('em').html(msg)
            selector.parent().find('.errorTips').fadeIn();
            $('.regBtn').val('注册').prop('disabled', false);

            if(isFocus){
                selector.focus();
            }
        }

        function initDo() {
            $('.mobile').click();
        }

        // 重置短信发送按钮
        function resetSmsBtn(index) {
            var init = setInterval(function() {
                index--;
                if (index <= 0) {
                    clearInterval(init);
                    $('.smsbtn').val('获取验证码').css({
                        'background': '#2AABE4'
                    }).prop('disabled', false);
                } else {
                    $('.smsbtn').val('重新发送(' + index + ')').prop('disabled', true);
                }
            }, 1000);
        }

        init();
    </script>

</html>
